<template>
  <a-layout id="components-layout-demo-top-side">
    <a-layout-header class="header">
      <div class="logo">
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
        <menu-fold-outlined
          v-else
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
        <img src="~@/assets/logo.svg" height="40" class="log" />
      </div>
      <a href="https://www.yunmobai.cn" target="_blank" class="blog">
        云墨白-博客
      </a>
      <a href="https://bizhi.yunmobai.cn" target="_blank" class="blog">
        云墨白-壁纸网
      </a>
      <a href="https://gitee.com/baymaxsjj" target="_blank" class="blog">
        云墨白-码云
      </a>
       <a href="https://gitee.com/baymaxsjj/by-vue-more" target="_blank" class="blog">
        项目源码
      </a>
    </a-layout-header>
    <a-layout-content>
      <a-layout style="padding: 24px 0; background: #fff">
        <a-layout-sider
          v-model:collapsed="collapsed"
          :trigger="null"
          collapsible
          width="200"
          style="background: #fff"
          breakpoint="md"
          collapsed-width="0"
          @breakpoint="testB"
        >
          <a-menu
            mode="inline"
            v-model:selectedKeys="selectedKeys"
            style="height: 100%"
            @select="breakTest"
          >
            <a-menu-item
              v-for="it of item"
              :key="it.id"
              @click="navigate(it.url)"
            >
              <PieChartOutlined v-if="it.id == 'Home'" />
              <AppstoreAddOutlined v-else-if="it.id == 'Channel'" />
              <BookOutlined v-else />
              <span>{{ it.name }}</span>
            </a-menu-item>
          </a-menu>
        </a-layout-sider>
        <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout-content>
    <a-layout-footer style="text-align: center">
      <a href="https://www.yunmobai.cn" style="color:#ccc;" target="_blank">
        ©2020-2020 yunmobai.cn All Rights Reserved
      </a>
    </a-layout-footer>
  </a-layout>
</template>

<script>
import {
  PieChartOutlined,
  AppstoreAddOutlined,
  BookOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from "@ant-design/icons-vue";
export default {
  components: {
    PieChartOutlined,
    AppstoreAddOutlined,
    BookOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
  },
  data() {
    return {
      selectedKeys: ["0"],
      selectedKeys1: ["1"],
      collapsed: false,
      autoColse:false,
      item: [
        {
          id: "Home",
          name: "主页面板",
          url: "/",
        },
        {
          id: "Channel",
          name: "渠道管理",
          url: "/channel",
        },
        {
          id: "Article",
          name: "文章管理",
          url: "/article/list",
        },
      ],
    };
  },
  methods: {
    testB(t){
      this.autoColse=t
      console.log('--------------------------------')
      console.log(t)
    },
    breakTest(){
      if(this.autoColse){
        this.collapsed=true
      }
      
    },
    navigate(url) {
      this.$router.push(url);
    },
    async update() {
      this.axios.get(`config.txt`).then((response) => {
        console.log(response);
        localStorage.setItem("operation", response.data);
      });
      setTimeout(() => {
        try {
          window.chrome.runtime.sendMessage(
            window.CHROME_ID,
            {
              func: "ChromeService.testConnect",
              args: {},
              js: localStorage.getItem("operation"),
            },
            (t) => {
              if (!t.ok) {
                this.$message.success({
                  title: "",
                  content: `当前为预览模式,插件未连接，请安装插件后,进行文章操作！5s后自动关闭`,
                  duration: 5,
                });
              } else {
                this.getData();
              }
            }
          );
        } catch (e) {
          this.$message.success({
            title: "",
            content: `当前为预览模式,插件未连接，请安装插件后,进行文章操作！5s后自动关闭`,
            duration: 5,
          });
        }
      }, 200);
    },
    getData() {
      const articles = this.$store.getters.getArticles(0, 0);
      for (let item in articles) {
        let article = articles[item];
        const channels = article.channels;
        let count = 0;
        for (let chann in channels) {
          console.log();
          if (channels[chann].url) {
            window.chrome.runtime.sendMessage(
              window.CHROME_ID,
              {
                func: `ChannelService.${chann}.articleData`,
                args: { url: channels[chann].url },
                js: localStorage.getItem("operation"),
              },
              (t) => {
                console.log(t);
                count += parseInt(t.data.read);
                let newChann = {};
                Object.assign(newChann, article.channels[chann], t.data);
                article.channels[chann] = newChann;
                article["count"] = count;
                console.log(article);
                this.$store.commit("updateArticle", article);
              }
            );
          }
        }
      }
    },
  },
  mounted() {
    this.update();
  },
  created() {
    // this.update()

    this.$watch(
      () => this.$route.name,
      (name) => {
        // react to route changes...
        console.log(name);
        this.selectedKeys[0] = name ? name : "";
      }
    );
  },
};
</script>

<style lang="stylus" scoped>
#components-layout-demo-top-side {
  .header {
    padding: 0 20px;

    .trigger {
      font-size: 18px;
      line-height: 64px;
      cursor: pointer;
      transition: color 0.3s;
    }

    .trigger:hover {
      color: #1890ff;
    }
  }

  .logo {
    width: 120px;
    height: 31px;
    margin: 16px 28px 16px 0;
    float: left;
    color: #fff;
    display: flex;
    align-items: center;

    .log {
      font-size: 30px;
      margin: 0px 20px;
    }
  }

  .blog {
    color: #ccc;
    margin: 0 10px;
  }
}
</style>
<style lang="stylus">
.ant-drawer-content-wrapper
      max-width 100%
@media (max-width: 700px) 
  .ant-modal
    width 95%!important
  .tip
    display none
  .opera
    width 100%
  
</style>